<template>
  <div>
    <el-card class="box-card" style="margin-top: 2vh">
      <template #header>
        <div class="card-header">
          <span>全站数据</span>
        </div>
      </template>
      <el-row class="home" :gutter="40">
        <el-col :span="1.5">
        </el-col>
        <el-col :span="11">
          <el-card shadow="never" style="height: 300px">
            <e-charts :options="chat1"></e-charts>
          </el-card>
        </el-col>
        <el-col :span="11">
          <el-card shadow="never" style="height: 300px">
            <e-charts :options="chat2"></e-charts>
          </el-card>
        </el-col>
    </el-row>
    <el-row class="home" :gutter="40" style="margin-top: 10vh">
      <el-col :span="1.5">
      </el-col>
      <el-col :span="11">
        <el-card shadow="never" style="height: 300px">
          <e-charts :options="chat3"></e-charts>
        </el-card>
      </el-col>
      <el-col :span="11">
        <el-card shadow="never" style="height: 300px" id="cloudWord">
          
        </el-card>
      </el-col>
    </el-row>
    </el-card>
  </div>
</template>

<script>
import api from '../../api/data.js'
import { ElMessage } from 'element-plus'
import echar from 'echarts'
import 'echarts-wordcloud'
import ECharts from '@/components/ECharts'
export default {
  name: 'AdminHome',
  components: {
    ECharts
  },
  data () {
    return {
      chat1: {
        title: {
          text: '博客浏览量'
        },
        xAxis: {
          data: []
        },
        yAxis: {},
        series: [
          {
            type: 'line',
            data: [],
            name: '数据一' 
          }
        ]
      },
      chat2: {
        title: {
          text: '文章发布'
        },
        series: [{
            type: 'pie',
            data: [
            ]
        }]
      },
      chat3: {
        title: {
          text: '文章收藏'
        },
        series: [{
            type: 'pie',
            data: [
            ]
        }]
      },
      chat4: null,
  }},
  methods: {
    
  },
  mounted () {
    api.userCountGraph({
      token: this.$store.state.token
    }).then((res) => {
      if (res.code === 342) {
        this.$store.commit('logout')
        this.$store.commit('tokenError')
        this.$router.push({path: '/login'})
      } else if (res.code < 300) {
        console.log(res.data)
        res.data.userCountList.forEach((item) => {
          this.chat1.xAxis.data.push(item.date)
          this.chat1.series[0].data.push(item.count)
        })
      } else {
        ElMessage.error(res.message)
      }
    })
    api.aArticleCategoryNum({
      token: this.$store.state.token
    }).then((res) => {
      if (res.code === 342) {
        this.$store.commit('logout')
        this.$store.commit('tokenError')
        this.$router.push({path: '/login'})
      } else if (res.code < 300) {
        res.data.articleCategoryNum.forEach((item) => {
          this.chat2.series[0].data.push({
            value: item.count,
            name: item.categoryName
          })
        })
      } else {
        ElMessage.error(res.message)
      }
    })
    api.aCategoryCollectionNum({
      token: this.$store.state.token
    }).then((res) => {
      if (res.code === 342) {
        this.$store.commit('logout')
        this.$store.commit('tokenError')
        this.$router.push({path: '/login'})
      } else if (res.code < 300) {
        // console.log(res.data.categoryCollectionNum)
        res.data.categoryCollectionNum.forEach((item) => {
          this.chat3.series[0].data.push({
            value: item.collectionNumber,
            name: item.categoryName
          })
        })
      } else {
        ElMessage.error(res.message)
      }
    })
    api.allWordCloud({
      token: this.$store.state.token
    }).then((res) => {
      if (res.code === 342) {
        this.$store.commit('logout')
        this.$store.commit('tokenError')
        this.$router.push({path: '/login'})
      } else if (res.code < 300) {
        this.chat4 = res.data.wordCloud.map((item) => ({
          name: item['tagName'],
          value: item['count']
        }));
        if (this.chat4) {
          let cloud = echar.init(document.getElementById('cloudWord'))
          cloud.setOption({
            backgroundColor: '#fff', // canvas背景颜色
            // canvas标题配置项
            title: {
                text: '',
                top: '0%',
                left: '-1%',
                textStyle: {
                    fontSize: 14,
                    color: '#3B3E41',
                    fontWeight: 'normal'
                }
            },
            series: [
              {
                type: 'wordCloud',
                left: '0%',                 // X轴偏移量
                top: '0%',                  // Y轴偏移量
                width: '100%',               // canvas宽度大小
                height: '100%',              // canvas高度大小
                sizeRange: [12, 50],         //  词典字体大小范围配置
                rotationRange: [0, 0],       // 词典字体旋转角度配置，默认不旋转
                gridSize: 25,                // 词典字体间距配置
                layoutAnimation: true,       // 为false词典过度会阻塞
                textStyle: {                 // 词典样式配置
                  normal: {
                    color() {
                      // 颜色随机渐变
                      let colors = ['#fe9a8bb3', '#fe9a8bb3', '#fe9a8b03', '#9E87FFb3', '#9E87FFb3', '#9E87FFb3', '#fe9a8bb3', '#fe9a8bb3', '#fe9a8bb3', '#73DDFF', '#58D5FF']
                      return colors[parseInt(Math.random() * 10)]
                    }
                  }
                },
                // 渲染词典数据
                data: [
                  // {
                  //   value: '50',          // 词典大小配置
                  //   name: 'iPhone 13',    // 词典名称配置
                  //   textStyle: {          // 单独配置某个词典样式
                  //   shadowBlur: 4,
                  //   shadowOffsetY: 14,
                  //   color: '#BDBEFA'
                  //   }
                  // },
                  ...this.chat4
                ]
              }
            ]
          })
        }
      } else {
        ElMessage.error(res.message)
      }
    })
    // console.log(this.chat1)
  }
}
</script>

<style scoped>
.box-card {
  margin-left: 20vw;
  width: 60vw;
}
</style>
